import React, { Component } from 'react'
import Header from '../components/Header_c';
import '../assets/style/servicePage_c.less';
import Img from '../components/Img_c';


let i = window.location.href
i = '?' + i.split('?')[1]
// console.log('i',i);
// ?1:2 我是1，我要发给2 
// ?1 我是1，要么不发，一发就群发
// ?:2 别管我是谁，我要发给2
i = i.replace(/[^\d\?:]/g, '')
//这条是去掉不是数字的，其 实有字母也行的
let m = i.match(/(?<=\?)[^:]+?(?=:|$)/)
let u = i.match(/(?<=:).+?$/)
//提取发给谁
m = m ? m + '，' : '谁？'
u = u ? '我给' + u + '发信息' : '我群发'

//-----------------------分割线------------------------------------- ---------
let ws = new WebSocket('ws://localhost:5000/' + i)
// console.log(ws);
ws.onmessage = (evt) => {
    console.log(evt.data)
}
ws.onopen = () => {
    console.log('连接成功')
    // ws.send('你好')
}
ws.onerror = () => {
    console.log('连接错误')
}
ws.onclose = () => {
    console.log('连接关闭')
}
//-----------------------分割线------------------------------------- ---------

// btn.onClick = () => ws.send(text.value ? text.value : u)

export default class ServicePage extends Component {

    state = {
        text: "",
        msg: []
    }


    componentDidMount() {
        ws.onmessage = (evt) => {
            console.log('evt', evt.data)
            let obj = {
                type: 'other',
                msg: evt.data
            }
            this.state.msg.push(obj)
            this.forceUpdate()
        }
    }
    handleClick = (e) => {
        if (!this.state.text) {
            return
        }
        let obj = {
            type: 'my',
            msg: this.state.text
        }
        this.state.msg.push(obj)
        ws.send(obj.msg)
        this.setState({
            text: ""
        })
    }
    handleChange = (e) => {
        this.setState({
            text: e.target.value
        })
    }
    render() {
        return (
            <div className="service">
                <Header>客服页面</Header>
                <div style={{ marginTop: "4rem" }}></div>
                <div className="talk">
                    {
                        this.state.msg.map((v, index) => {
                            return (
                                v.type == 'my' ?
                                    <div className="talk-body-right" key={index}>
                                        <Img src="header.jpg"></Img>
                                        <div className="msg">
                                            <p >{v.msg}</p>
                                        </div>
                                    </div> :
                                    <div className="talk-body-left" key={index}>
                                        <Img src="header2.jpg"></Img>
                                        <div className="msg">
                                            <p >{v.msg}</p>
                                        </div>
                                    </div>
                            )
                        })
                    }
                </div>
                <div className="ask">
                    <input type="text" value={this.state.text} onChange={this.handleChange} id="text"></input>
                    <input className="but" type="button" value="发送" onClick={this.handleClick} id="btn"></input>
                </div>

            </div>
        )
    }
}
